<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{common/header::head}"></th:block>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <meta name="description" content="读几首诗，采几片云"/>
    <meta name="author" content="长亭残木"/>
    <meta name="keywords" content="诗词平台,传统文化">
    <title>诗词索引-云沾衣-入云深处亦沾衣</title>
</head>
<body>
<div th:insert="~{common/header :: home_nav}"></div>
<div class="container full">
    <div class="row">
        <div class="col col-sm-12 col-lg-9">
            <div class="card">
                <div class="card-body">
                    <div id="divDynasty" class="d-flex flex-row flex-nowrap author-criteria-collapse">
                        <div style="width:3rem;">
                            <span class="m-1 badge bg-secondary">朝代：</span>
                        </div>
                        <ul class="list-unstyled d-flex flex-row flex-wrap align-items-center w-100 ">
                            <th:block th:each="dynasty :${dynasties}">
                                <li th:class="${ indexDynasty== dynasty.getDynastyId() ? 'm-1 badge badge-light bg-dark':'m-1 badge badge-light'}">
                                    <a th:href="@{/index/poetry(dynasty=${dynasty.getDynastyId()},tag=${tagId})}"
                                       th:text="${dynasty.getDynastyName()}"></a></li>
                            </th:block>
                        </ul>
                        <div class="d-block d-md-none">

                            <a class="m-1" href="javascript:;" style="width:1.2rem;"
                               onclick="collapseClick(this,'divDynasty')">
                                <i th:class="${tagId==0?'fa-solid fa-chevron-down':'fa-solid fa-chevron-down'}"></i></a>
                        </div>
                    </div>
                    <div id="divCate"
                         th:class="${tagId==0?'d-flex flex-row flex-nowrap author-criteria-collapse':'d-flex flex-row flex-nowrap author-criteria-expand'}">
                        <div style="width:3rem;">
                            <span class="m-1 bg-secondary badge">分类：</span>
                        </div>
                        <ul class="list-unstyled d-flex flex-row flex-wrap align-items-center w-100">
                            <th:block th:each="tag :${tags}">
                                <li th:class="${ tagId == tag.tagId ? 'm-1 badge badge-light bg-dark':'m-1 badge badge-light'}">
                                    <a th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tag.tagId})}"
                                       th:text="${tag.tagName}"></a></li>
                            </th:block>
                        </ul>
                        <div>
                            <a class="m-1" href="javascript:;" style="width:1.2rem;"
                               onclick="collapseClick(this,'divCate')">
                                <i th:class="${tagId==0?'fa-solid fa-chevron-down':'fa-solid fa-chevron-down'}"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <th:block th:each="poetry : ${dataInfo.getList()}">
                    <div class="card">
                        <div class="card-body">
                            <a target="_blank" th:href="@{'/poetry/'+${poetry.poetryId}}">
                                <div style="font-size: x-large" th:text="${poetry.poetryTitle}"></div>
                            </a>
                            <div style="margin-top: 20px;margin-bottom: 20px ">
                                [<a style="color: #580000" th:href="@{/index/poetry/(dynasty=${poetry.dynastyId})}"
                                    th:text="${poetry.poetryDynasty}"></a>]
                                <a style="color: #580000" target="_blank" th:href="@{'/author/'+${poetry.authorId}}"
                                   th:text="${poetry.poetryAuthor}"
                                ></a>
                            </div>
                            <div style="font-size: large; line-height: 1.5;">
                    <span th:text="${poetry.poetryContent}" style="white-space: pre-wrap;">
                    </span>
                            </div>

                            <div style="margin-top: 20px">
                                <th:block th:each="tag : ${poetry.tagList}">
                                    <a th:href="@{/index/poetry(tag=${tag.tagId})}" th:text="${tag.tagName}"
                                       class="badge rounded-pill btn-primary">成功</a>
                                </th:block>
                            </div>
                        </div>
                    </div>
                </th:block>

                <!--分页-->
                <th:block th:if="${ dataInfo.getPages()> 1}">
                    <ul class="pagination justify-content-center">
                        <!--总页数小于7-->
                        <th:block th:if="${dataInfo.getPages() < 7}" th:each="page:${dataInfo.getNavigatepageNums()}">
                            <li th:class="${page == dataInfo.getPageNum() ? 'page-item active':'page-item'}">
                                <a th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${page})}"
                                   class="page-link" th:text="${page}"></a>
                            </li>
                        </th:block>
                        <th:block th:if="${dataInfo.getPages()>= 7}">
                            <!--当前页小于4-->
                            <th:block th:if="${dataInfo.getPageNum() < 4}">
                                <!--前3页-->
                                <th:block th:each="page:${#numbers.sequence(1,3)}">
                                    <li th:class="${page == dataInfo.getPageNum() ? 'page-item active':'page-item'}">
                                        <a th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${page})}"
                                           class="page-link" th:text="${page}"></a>
                                    </li>
                                </th:block>
                                <!--4、5页-->
                                <li class="page-item">
                                    <a th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${4})}"
                                       class="page-link">4</a>
                                </li>
                                <!--分隔符-->
                                <li class="page-item mx-2" disabled="">...</li>
                                <!--最后页-->
                                <li class="page-item">
                                    <a th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${dataInfo.getPages()})}"
                                       class="page-link" th:text="${dataInfo.getPages()}"></a>
                                </li>
                                <li class="page-item"><a
                                        th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${dataInfo.getPageNum()+1})}"
                                        class="page-link">&gt;</a></li>
                                <th:block th:if="${dataInfo.getPages()-dataInfo.getPageNum() > 10}">
                                    <li class="page-item"><a
                                            th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${dataInfo.getPageNum()+10})}"
                                            class="page-link">&raquo;</a></li>
                                </th:block>
                            </th:block>

                            <th:block th:if="${dataInfo.getPageNum() >= 4}">
                                <!--当前页小于等于倒数第4-->
                                <th:block th:if="${dataInfo.getPageNum() <= dataInfo.getPages() - 4}">
                                    <th:block th:if="${dataInfo.getPageNum() > 10}">
                                        <li class="page-item"><a
                                                th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${dataInfo.getPageNum()-10})}"
                                                class="page-link">&laquo;</a>
                                        </li>
                                    </th:block>
                                    <li class="page-item"><a
                                            th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${dataInfo.getPageNum()-1})}"
                                            class="page-link">&lt;</a></li>
                                    <!--第1页-->
                                    <li class="page-item">
                                        <a th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${1})}"
                                           class="page-link">1</a>
                                    </li>
                                    <!--分隔符-->
                                    <li class="page-item mx-2" disabled="">...</li>

                                    <li class="page-item">
                                        <a th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${dataInfo.getPageNum()-1})}"
                                           class="page-link" th:text="${dataInfo.getPageNum() - 1}"></a>
                                    </li>
                                    <li class="page-item active">
                                        <a class="page-link" th:text="${dataInfo.getPageNum()}"></a>
                                    </li>
                                    <li class="page-item">
                                        <a th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${dataInfo.getPageNum()+1})}"
                                           class="page-link" th:text="${dataInfo.getPageNum() + 1}"></a>
                                    </li>
                                    <!--分隔符-->
                                    <li class="page-item mx-2" disabled="">...</li>
                                    <!--最后页-->
                                    <li class="page-item">
                                        <a th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${dataInfo.getPages()})}"
                                           class="page-link" th:text="${dataInfo.getPages()}"></a>
                                    </li>
                                    <li class="page-item"><a
                                            th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${dataInfo.getPageNum()+1})}"
                                            class="page-link">&gt;</a></li>
                                    <th:block th:if="${dataInfo.getPages()-dataInfo.getPageNum() > 10}">
                                        <li class="page-item"><a
                                                th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${dataInfo.getPageNum()+10})}"
                                                class="page-link">&raquo;</a>
                                        </li>
                                    </th:block>
                                </th:block>
                            </th:block>
                            <!--当前页大于等于4-->
                            <th:block th:if="${dataInfo.getPageNum() > dataInfo.getPages() - 4}">
                                <th:block th:if="${dataInfo.getPageNum() > 10}">
                                    <li class="page-item"><a
                                            th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${dataInfo.getPageNum()-10})}"
                                            class="page-link ">&laquo;</a></li>
                                </th:block>
                                <li class="page-item"><a
                                        th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${dataInfo.getPageNum()-1})}"
                                        class="page-link">&lt;</a></li>
                                <!--第1页-->
                                <li class="page-item">
                                    <a th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${1})}"
                                       class="page-link">1</a>
                                </li>
                                <!--分隔符-->
                                <li class="page-item mx-2" disabled="">...</li>
                                <!--后5页-->
                                <th:block
                                        th:each="page:${#numbers.sequence(dataInfo.getPages() - 3,dataInfo.getPages())}">
                                    <li th:class="${page == dataInfo.getPageNum() ? 'page-item active':'page-item'}">
                                        <a th:href="@{/index/poetry(dynasty=${indexDynasty},tag=${tagId},pageNum=${page})}"
                                           class="page-link" th:text="${page}"></a>
                                    </li>
                                </th:block>
                            </th:block>
                        </th:block>
                    </ul>
                </th:block>
            </div>
        </div>
        <div class="col-sm-auto col-lg-3">
            <div th:insert="~{common/common::ghcard}"></div>
        </div>
    </div>
</div>
<div th:insert="~{common/footer ::home-footer}"></div>
<script>
    function collapseClick(e, div) {
        var divNode = document.getElementById(div)
        if (divNode.classList.contains('author-criteria-collapse')) {
            divNode.classList.remove('author-criteria-collapse')
            divNode.classList.add('author-criteria-expand');
            e.innerHTML = '<i class="fa-solid fa-chevron-up"></i>'
        } else {
            if (divNode.classList.contains("author-criteria-expand")) {
                divNode.classList.remove('author-criteria-expand')
                divNode.classList.add('author-criteria-collapse')
                e.innerHTML = '<i class="fa-solid fa-chevron-down"></i>'
            }
        }
    }
</script>
</body>
</html>
